@use "svg";

.base-icon,
.icon-font {
  border: 0;

  background-color: transparent;
  background-position: 50% 50%;
  background-size: 100%;
  background-repeat: no-repeat;

  font-size: 0;
}

.icon-font {
  position: relative;
  bottom: -0.125em;

  display: inline-block;

  width: 1em;
  height: 1em;

  font-size: inherit;
}

.icon-location-white {
  @include svg.background-svg(
    "<svg viewBox='0 0 1024 1024'><path d='M511.937 32c-200.573 0-363.638 160.25-363.638 357.246 0 154.514 223.94 454.78 320.31 581.482A54.61 54.61 0 00511.937 992c16.996 0 33.273-7.916 43.433-21.272 96.286-126.68 320.353-426.968 320.353-581.482C875.723 192.25 712.53 32 511.937 32zm0 487.101c-85.682 0-155.425-68.346-155.425-152.503 0-84.115 69.743-152.567 155.425-152.567 85.723 0 155.36 68.452 155.36 152.567 0 84.157-69.637 152.503-155.36 152.503z' fill='#fff'/></svg>"
  );
}

.icon-share {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path d="M618.86 92L992 484.88 618.86 875.9V651.38S247.64 608.78 32 932c0 0 67.5-615.48 586.86-615.48" fill="#fff"/></svg>'
  );
}

.icon-author {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M632.938 600.125c75.937-42.188 129.375-126.563 129.375-219.375 0-140.625-112.5-253.125-253.125-253.125s-253.125 112.5-253.125 253.125c0 95.625 50.625 177.188 129.375 219.375C278.563 642.313 197 735.125 174.5 853.25c-2.813 8.438 0 16.875 5.625 22.5 2.813 8.438 11.25 11.25 19.688 11.25h618.75c8.437 0 16.875-2.813 22.5-11.25 5.625-5.625 8.437-14.063 5.625-22.5-22.5-118.125-106.875-210.938-213.75-253.125z"/></svg>'
  );
}

.icon-eye {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M512 812C152 812 32 512 32 512s120-300 480-300 480 300 480 300-120 300-480 300zm0-480c-99.42 0-180 80.58-180 180s80.58 180 180 180 180-80.58 180-180-80.58-180-180-180zm0 300c-66.24 0-120-53.76-120-120h120l-84.84-84.84A119.4 119.4 0 0 1 512 392c66.24 0 120 53.76 120 120s-53.76 120-120 120z"/></svg>'
  );
}

.icon-time {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path d="M512 887c207.103 0 375-167.897 375-375S719.103 137 512 137 137 304.897 137 512s167.897 375 375 375zM351.49 632.74l132.385-132.393V343.25a28.125 28.125 0 0 1 56.25 0V512a28.125 28.125 0 0 1-8.24 19.884L391.258 672.51a28.125 28.125 0 1 1-39.768-39.768z" fill="#888"/></svg>'
  );
}

.icon-teacher {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path fill="#888" d="M262.571 307.243a176.512 176.512 0 1 0 353.024 0 176.512 176.512 0 1 0-353.024 0Zm711.808 116.992c-10.496-10.496-27.648-10.496-38.144 0L643.37 716.97c-2.304 2.304-3.968 5.12-5.248 7.936-.384 0-.64.128-1.024.128s-.768-.128-1.024-.128a26.957 26.957 0 0 1-36.224-1.792c-10.496-10.496-10.496-27.648 0-38.144l86.784-86.784c-36.864-36.352-84.608-63.488-138.496-77.568l-76.8 76.8-28.928 110.848c-.64 1.792-5.504 1.792-6.144 0L408.49 601.643l-80.384-80.384c-124.16 33.408-214.784 136.832-214.784 259.328v50.176c0 24.576 22.144 44.544 49.536 44.544h64v-84.608a14.592 14.592 0 1 1 29.184 0v84.608h460.032c27.392 0 49.536-19.968 49.536-44.544v-50.176c0-32.128-6.656-62.72-18.048-91.264l227.2-227.2c10.112-10.24 10.112-27.392-.384-37.888z"/></svg>'
  );
}

.icon-location {
  @include svg.background-svg(
    "<svg viewBox='0 0 1024 1024'><path d='M511.937 32c-200.573 0-363.638 160.25-363.638 357.246 0 154.514 223.94 454.78 320.31 581.482A54.61 54.61 0 00511.937 992c16.996 0 33.273-7.916 43.433-21.272 96.286-126.68 320.353-426.968 320.353-581.482C875.723 192.25 712.53 32 511.937 32zm0 487.101c-85.682 0-155.425-68.346-155.425-152.503 0-84.115 69.743-152.567 155.425-152.567 85.723 0 155.36 68.452 155.36 152.567 0 84.157-69.637 152.503-155.36 152.503z' fill='#888' /></svg>"
  );
}
